import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import * as api from './server';
import './css/Home.css';
import dayjs from './day';

const Home = () => {
    const [topics, setTopics] = useState([]);
    useEffect(() => {
        api.getTopics()
            .then(res => {
                console.log(res.data)
                setTopics(res.data);
            })
    }, [])
    return (
        <div className='home'>
            <header className='welcome'>
                欢迎来到Cnode社区
            </header>
            <ol className='topics'>
                {
                    topics.map(item => {
                        return <li key={item.id}>
                            <Link to={'/topic/' + item.id} key={item.id}>{item.title}</Link>
                            <span className='time'>{dayjs(item.last_reply_at).fromNow()}</span>
                        </li>
                    })
                }
            </ol>
        </div>
    );
};

export default Home;
